<!--
 * @Description: In User Settings Edit
 * @Author: gyc
 * @Date: 2019-09-07 18:14:43
 * @LastEditTime: 2019-10-06 15:16:14
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="mo-index-view">
    <Row class="index-view-row">
      <div class="big-back">
        <!-- <AnimeText class="anime-text"></AnimeText> -->
        连接者人数:{{this.count}}
      </div>
      <vue-particles
        class="big-back-text"
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="3"
        linesColor="#fff"
        :linesWidth="1.5"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      ></vue-particles>
      <Row style="width:100%">
        <Col :lg="{span:24}">
          <h1 style="margin-bottom:30px;color:white">店长推荐</h1>
          <ShareIndex></ShareIndex>
        </Col>
      </Row>
      <Row style="width:100%">
        <Col :lg="{span:8,offset:8}" class="index-view-col">
          <h1 style="margin-top:30px;color:white">热门分享</h1>
          <div class="cnt" v-for="(v,i) in msg" :key="i" :id="i">
            <transition name="index">
              <img src="../../../assets/img/sp1.jpg" v-if="v.show" />
            </transition>
          </div>
        </Col>
      </Row>
    </Row>
    <!-- <Maskmo></Maskmo> -->
  </div>
</template>
<script>
import $ from "jquery";
import { setTimeout } from "timers";
// import Maskmo from "../alert/mask";
import ShareIndex from "../index/share/share";
import AnimeText from "../anime/animeText/animeText";
export default {
  name: "moIndex",
  data() {
    return {
      msg: [
        { text: "1", show: false },
        { text: "1", show: false },
        { text: "1", show: false },
        { text: "1", show: false },
        { text: "1", show: false },
        { text: "1", show: false }
      ]
    };
  },
  props:['count'],
  created() {},
  mounted() {
    this.showBoxs();
    $(".big-back").css("height", $(window).height());
  },
  methods: {
    showBoxs: function() {
      let _this = this;
      let observer = new IntersectionObserver(
        changes => {
          for (const change of changes) {
            // console.log(change.time);
            // console.log(change.rootBounds);
            // console.log(change.boundingClientRect);
            // console.log(change.intersectionRect);
            console.log(change.intersectionRatio);
            // console.log(change.target);
            //ES6异步调用方法
            if (change.intersectionRatio !== 0) {
              function a() {
                _this.msg[change.target.id].show = true;
              }
              async function b() {
                let c = await a();
                return c;
              }
              b().then(() => {
                observer.unobserve(
                  document.getElementsByClassName("cnt")[change.target.id]
                );
              });
            }
          }
        },
        { threshold: 0.1 }
      );
      for (let i = 0; i < document.getElementsByClassName("cnt").length; i++) {
        observer.observe(document.getElementsByClassName("cnt")[i]);
      }
    }
  },
  components: {
    ShareIndex,
    AnimeText
  }
};
</script>
<style lang="scss" scoped>
@media screen and (max-width: 1370px) {
  .big-back {
    height: 670px;
  }
}
@media screen and (max-width: 2000px) and (min-width: 1370px) {
  .big-back {
    height: 948px;
  }
}
.mo-index-view {
  width: 100%;
}
.index-view-row {
  width: 100%;
  height: auto;
  .index-view-col {
    h1 {
      color: black;
      padding-bottom: 30px;
      letter-spacing: 2x;
    }
  }
  .big-back {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    top: -60px;
    color: white;
    font-size: 32px;
    // height: 948px;
    background-image: url("../../../assets/img/bg2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .big-back-text {
    position: absolute;
    width: 100%;
    top: -72px;
    z-index: 901;
  }
}
.anime-text {
  position: absolute;
  bottom: 150px;
  right: 20px;
}
.cnt {
  /*background: #ececec;*/
  height: 300px;
  width: 100%;
  margin-bottom: 40px;
  background-color: white;
  border-radius: 4px;
  // box-shadow: 0px 4px 5px black;
  img {
    width: 100%;
    height: 100%;
  }
}
.index-enter-active {
  transform: translate3d(0, 0, 0);
  transition: all 0.4s;
}
.index-enter {
  transform: translate3d(0, 100%, 0);
}
</style>